<template>
	<!-- 顶部卡片区域 -->
	<view class="wrap">
		<view class="font28 acea-row row-middle row-between top_tab">
			<!-- <view :class="activeIdx == 1 ? 'red':'col_80'" @click="changeTab(1)">我的粉丝 ({{fans}})</view> -->
			<view :class="activeIdx == 2 ? 'red':'col_80'" @click="changeTab(2)">我的关注 ({{star}})</view>
		</view>
		<!-- 列表数据 -->
		<view class="bottom">
			<view class="listItem acea-row row-middle row-between" v-for="(item,index) in list" >
				<image :src="item.avatar" mode="aspectFill" @click="toDetail(item)"></image>
				<view class="info acea-row row-column" @click="toDetail(item)">
					<text class="col_33 font26">{{item.nickname}}</text>
					<!-- <text class="col_80 font24">粉丝数{{item.fans||0}}</text> -->
				</view>
				<view :class="['font26','acea-row','row-middle','row-center',item.status==1?'qu_guan':'guan']"
					@click="fansOpear(item)">
					{{item.status==1?'已关注':'+关注'}}
				</view>
			</view>
		</view>
		<view class='loadingicon acea-row row-center row-middle'>
			<text class='loading iconfont icon-jiazai' :hidden='loading'></text>{{loadTitle}}
		</view>
	</view>
</template>

<script>
	import {
		getFans,
		getUserFriend,
		addUserFriend,
		delUserFriend,
		getUFriendFansCount
	} from '@/api/user.js'
	export default {
		data() {
			return {
				activeIdx: 2,
				fans: 100,
				star: 100,
				isloading: false,
				params: {
					limit: 10,
					page: 1,
				},
				list: [],
				loading: false,
				loadTitle: ''
			}
		},
		methods: {
			changeTab(index) {
				this.activeIdx = index;
				this.list=[];
				this.params.page = 1;
				this.getList();
			},
			fansOpear(item,callback){
				let that = this;
				if(item.status == 1){
					uni.showModal({
						title: '提示',
						content: '确定取消关注',
						success: function(res) {
							if(res.confirm){
								that.change(item,callback)
							}
						}
					});
					return;
				}
				this.change(item,callback)
			},
			async change(item,callback) {
				//关注/取关
				let res;
				if(item.status == 1){
					res = await delUserFriend({
						uid: item.friendId,
						friendId: item.uid
					})
				}else{
					res = await addUserFriend(item);
				}
				
				if(res.code === 200){
					item.status = item.status==1?0:1
					console.log('callback',callback)
					if(callback){
						callback(item);
						this.getList()
					}
					this.params.page =1;
					this.getCount();
				}
				
				return item;
				
			},
			//获取关注/粉丝列表
			async getList() {
				this.loading = false;
				let res = null;
				if (this.activeIdx == 1) {
					res = await getFans(this.params);
				} else {
					res = await getUserFriend(this.params);
				}
				this.loading = true;
				if (this.params.page == 1) {
					this.list = res.data.list;
					if(this.activeIdx == 2){
						res.data.list.forEach(item=>{
							item.status = 1;
						})
					}
					if (this.list.length < 0) {
						this.loadTitle = '暂无数据'
					}
				} else {
					this.list = this.list.concat(res.data.list);
					if (res.data.list.length <= 0) {
						this.loadTitle = '已加载全部'
					}
				}
			},
			//获取关注粉丝数量
			getCount(){
				getUFriendFansCount().then(res=>{
					console.log(res)
					if(res.code == 200){
						this.star = res.data.attention;
						this.fans = res.data.vermicelli;
					}
				})
			},
			//跳转个人主页
			toDetail(item){
				let that = this;
				console.log(2)
				uni.navigateTo({
					url:'/pages/details/merchantInfo/merchantInfo?type=personal&id='+item.friendId,
					events:{
						 fanss(data){
							that.fansOpear(data.info,data.callback);
						}
					}
				})
			}
		},
		onReachBottom: function() {
			if (!this.loading) return;
			this.getList()
		},
		created() {
			this.getCount()
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F7F8FA;
	}

	.wrap {
		padding-bottom: 28rpx;
	}

	.font20 {
		font-size: 20rpx;
	}

	.font22 {
		font-size: 22rpx;
	}

	.font24 {
		font-size: 24rpx;
	}

	.font26 {
		font-size: 26rpx;
	}

	.font28 {
		font-size: 28rpx;
	}

	.font30 {
		font-size: 30rpx;
	}

	.font32 {
		font-size: 32rpx;
	}

	.font36 {
		font-size: 36rpx;
	}

	.red {
		color: #EE212D;
	}

	.col_80 {
		color: #808080;
	}

	.col_A6 {
		color: #a6a6a6;
	}

	.col_33 {
		color: #333333;
	}

	.col_80 {
		color: #808080;
	}

	.col_ff {
		color: #ffffff;
	}

	.top_tab {
		width: 100%;
		box-sizing: border-box;
		height: 96rpx;
		padding: 18rpx 60rpx;
		background-color: #fff;
	}

	.bottom {
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
		margin: 34rpx 30rpx 0;


		.listItem {
			margin: 0 30rpx;
			padding: 38rpx 0;
			border-bottom: 2rpx solid #eee;

			&:last-child {
				border-bottom: unset
			}

			image {
				width: 88rpx;
				height: 88rpx;
				border-radius: 44rpx;
				margin-right: 20rpx;
			}

			.info {
				flex: 1;
			}

			.info,
			.other {
				text:first-child {
					margin-bottom: 14rpx;
				}
			}
		}
	}

	.guan {
		width: 116rpx;
		height: 52rpx;
		border-radius: 31rpx;
		background: #EE212D;
		color: #fff;
	}

	.qu_guan {
		width: 116rpx;
		height: 52rpx;
		border-radius: 31rpx;
		background: #E9E7E7;
		color: #808080;

	}
</style>